/**
 * 学习目标：创建组件-函数式组件
 */
import React from 'react';
import ReactDOM from 'react-dom';

// ❌ 小写开头的函数， 是普通函数不是组件
function hello(params) {
  return <h1>我时一个组件</h1>;
}

// 创建组件
// 1. 💥组件名，必须大写字母开头
function Xxx() {
  // 2. 组件需要返回一个jsx， 如果不想渲染任何内容， 返回一个null
  return <h1>我Xxx组件</h1>;
}

const divNode = (
  <div>
    {/* 使用组件： 当做标签使用 */}
    {/* 3. 使用组件时，必须大写开头 */}
    <Xxx></Xxx>

    {/*❌ <xxx></xxx> */}
    {/*  {hello()} */}
  </div>
);

ReactDOM.render(divNode, document.getElementById('root'));
